<!--
/* @license
 * Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>&lt;model-viewer&gt; Interactive Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>
    <button onclick="addElement()">Add ModelViewer</button><br />
    <button onclick="removeElement()">Remove ModelViewer</button><br />
    <script type="module" src="../../../node_modules/@google/model-viewer/dist/model-viewer.js"></script>
    <script type="module">
      customElements.get("model-viewer").modelCacheSize = 0;

      window.addElement = () => {
        const mv = document.createElement("model-viewer");
        mv.src = "../shared-assets/models/Astronaut.glb";
        mv.cameraControls = true;
        mv.interactionPrompt = 'none';
        document.body.appendChild(mv);
      };

      window.removeElement = () => {
        document.querySelector("model-viewer").remove();
      };
    </script>
</body>
</html>
